import {userStore} from "@/store";
import {useState} from "react";
import {observer} from "mobx-react-lite";

function Todo() {
    const {taskStore}=userStore();
    // const [check,setCheck]=useState();
    const onChange=(id,e)=>{
        //console.log(id,'id',e)

        console.log(e.target.checked);
       taskStore.singleCheck(id,e.target.checked)
    }
    const allChange=(e)=>{
        console.log(e,'e');
        taskStore.allCheck(e.target.checked)
    }
     return <div>
          <h2>todolist</h2>
         <div>
             <input type="text"/>
             <input onChange={allChange} type="checkbox" checked={taskStore.isAll}/>
         </div>

           <ul>
               {taskStore.list.map(item=>
                   <li key={item.id}>
                       <span>{item.name}</span>
                       <input onChange={(e)=>onChange(item.id,e)} type="checkbox"  checked={item.isDone} />
                   </li>)
               }
           </ul>

         todolist-列表
     </div>
}
export default observer(Todo)